<template>
  <div style="margin-top:20px">
    <el-form ref="form" :rules="rules" :model="form" >
      <el-row>
        <el-col :span="24">
          <div>
            <el-form-item label="自定义模板url" prop="standardTemplateUrl"  style="margin-right:15px" label-width="130px">
              <el-input v-model="form.standardTemplateUrl" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入自定义模板url'"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <el-form-item label="自定义模板名称" prop="standardTemplateName"  style="margin-right:15px" label-width="130px">
              <el-input v-model="form.standardTemplateName" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入自定义模板名称'"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <el-form-item label="类型" prop="standardWaybillType"  style="margin-right:15px" label-width="130px">
              <el-input v-model="form.standardWaybillType" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入类型'"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <el-form-item label="备注" prop="remarks"  style="margin-right:15px" label-width="130px">
              <el-input v-model="form.remarks" type="textarea" :disabled='isDisabled' :placeholder="operationType == 'detail' ? ' ' : '请输入备注'"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="!isDisabled">
      <el-button type="primary" @click="submitData" :disabled='isDisabled' plain>确 定</el-button>
    </div>
  </div>
</template>
<script>
import { cloudprintStandardAdd, listTemplates, cloudprintStandardEdit } from '@/api/basicInfo'
import { validateUrl } from "@/utils/validate.js";
  export default {
    props: {
      operationType: {
        type: String,
        default: 'add'
      },
      operationCode:{
        type: Number | String,
        required: false
      }
    },
    data() {
      return {
        form: {
            code: 'ZDY',
            standardTemplateUrl: '',
            standardTemplateName: '',
            type: 1,
            standardWaybillType: '',
            remarks: ''
        },
        isDisabled: ['detail'].includes(this.operationType),
        rules:{
          standardTemplateUrl: [
            { required: true, message: '请输入自定义模板url', trigger: 'blur' },
            {
              required: true,
              validator(rule, value, callback) {
                validateUrl(value)
                  ? callback()
                  : callback(new Error("url格式有误"));
              },
              trigger: "blur",
            }
          ],
          standardTemplateName: [
            { required: true, message: '请输入自定义模板名称', trigger: 'blur' }
          ],
          standardWaybillType: [
            { required: true, message: '请输入类型', trigger: 'blur' }
          ],
        }
      }
    },
    mounted() {
      if(this.operationType !='add'){
        this.getInfo()
      }
    },
    created(){
      
    },
    methods: {
      //   确定
      submitData(){
        this.$refs['form'].validate((valid) => {
            if (valid) {
                let parms = JSON.parse(JSON.stringify(this.form))
                if(this.operationType === 'add'){
                    cloudprintStandardAdd(parms).then(response => {
                        this.$message.success(response.msg);
                        if(response.status === 0){
                            this.$emit('operationComplete', this.operationType)
                        }
                    })
                }
                if(this.operationType === 'edit'){
                    parms.cloudprintStandardTemplatesId = this.operationCode
                    cloudprintStandardEdit(parms).then(response => {
                        this.$message.success(response.msg);
                        if(response.status === 0){
                            this.$emit('operationComplete', this.operationType)
                        }
                    })
                } 
            }else{
                return this.$message.error('请检查所填内容');
            }
        })
      },
      getInfo(){
        listTemplates(this.operationCode).then(response => {
            this.form = response.data
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
